<script setup lang="ts">
import { useRequest } from 'alova/client'
import { reactive } from 'vue'
import * as api from '@/apis/auth'
import { useAuthStore } from '@/stores/modules/auth'

const { loading, data, send, error } = useRequest(api.login, {
  immediate: false,
})

const formData = reactive({
  username: 'admin',
  password: '123456',
})

function submit() {
  send({ ...formData })
}

const authStore = useAuthStore()
</script>

<template>
  <div>
    <form>
      <input id="username" v-model="formData.username" type="text" name="username">
      <input id="password" v-model="formData.password" type="password" name="password">
      <button :disabled="loading" @click="submit">
        登录
      </button>

      <div>
        <div v-if="loading">
          Loading...
        </div>
        <div v-else>
          {{ data }}
        </div>
      </div>

      <div>
        token: {{ authStore.token }}
      </div>

      <div v-if="error" class="text-red">
        {{ error }}
      </div>
    </form>
  </div>
</template>
